<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-08 16:14:57
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-09-17 20:07:43
 * @FilePath: \website-reconstruction---vue\src\components\sections\product\ProductItem.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { getRandomAnimation } from '@/utils/tools/tools'
import { defineProps } from 'vue'

interface Product {
  id: number
  title: string
  image: string
  modelNumber: string
  rating: number // 假设是1到5的整数
}

const props = defineProps<Product>()
// console.log(props)
</script>

<template>
  <div
    :class="`col-lg-3 col-md-6 wow ${getRandomAnimation}`"
    :data-wow-delay="(props.id % 4) * 0.1 + 's'"
  >
    <div class="Product-grid mb-xl-30">
      <div class="Product-grid-wrapper Product-grid bx-wrapper">
        <div class="image-sec">
          <router-link :to="`/specification/${props.modelNumber}`">
            <img :src="props.image" class="full-width" :alt="props.title" />
          </router-link>
        </div>
        <div
          class="Product-grid-caption padding-10 bg-custom-white p-relative text-center"
        >
          <h4 class="title fs-16">
            <router-link
              :to="`/specification/${props.modelNumber}`"
              class="text-custom-black"
              >{{ props.title }}</router-link
            >
          </h4>
          <ul>
            <li v-for="n in 5" :key="n">
              <i class="fas fa-star" :class="{ active: n <= props.rating }"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
